<template>
	<cu-page-base :nav-bar-options="navBarOptions" @clickNavBarLeft="goBack">
		<view class="cu-w-100 cu-p-20">
			<view
				class="cu-w-100 cu-p-20 cu-bg-main cu-border-r-20 cu-shadow cu-d-flex cu-flex-column cu-j-sb cu-a-center">
				<view class="cu-w-100">
					<audio class="cu-w-100" style="text-align: left" :src="recordStore.compoundList[idx].url"
						:name="recordStore.compoundList[idx]._id" author="暂无" :action="audioAction" controls></audio>
				</view>
				<view class="cu-w-100 cu-py-10">
					<u-button @click="downLoad()" text="下载到本地" shape="circle"
						color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
				</view>
				<view class="cu-w-100 cu-py-10">
					<u-button @click="copyBtn(recordStore.compoundList[idx].text)" text="复制文案" shape="circle"
						color="linear-gradient(to right, rgb(220, 194, 11), rgb(4, 151, 99))"></u-button>
				</view>
				<view class="cu-w-100 cu-py-10 cu-d-flex cu-flex-column cu-j-sb cu-a-stretch">
					<view class="cu-text-danger">备注：</view>
					<view class="cu-text-danger"><text class="cu-px-20"></text>配音文件仅保留3天，请尽快下载保存</view>
				</view>
			</view>
			<view class="progress-container" v-if="isShowProgress">
				<view class="progress-box">
					<view class="text">{{tips}}</view>
					<progress :percent="progress" show-info stroke-width="3" />
				</view>
			</view>
		</view>
	</cu-page-base>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	import commMiXin from '@/common/mixin/common-mixin.js';
	export default {
		mixins: [commMiXin],
		computed: {
			...mapState({
				recordStore: state => state.recordStore,
			})
		},
		data() {
			return {
				navBarOptions: {
					title: "详情",
					leftText: "返回",
					leftIcon: "back",
				},
				idx: 0,
				audioAction: {
					method: 'pause'
				},
				isShowProgress: false,
				progress: 0,
				tips:"文件下载中，请稍后......"
			};
		},
		onLoad(e) {
			const {
				idx
			} = e
			if (idx !== undefined) {
				this.idx = idx
			}
		},
		methods: {
			copyBtn(data) {
				uni.setClipboardData({
					data: data,
					success: function() {
						uni.showToast({
							icon: 'success',
							title: "已复制到剪贴板",
							duration: 1500
						})
					},
					fail: function(err) {}
				});
			},
			async downLoad(url) {
				this.downloadFile(this.recordStore.compoundList[this.idx].url)
			},
			goBack(data) {
				this.gotoPage(1, 'navigateBack');
			},
			downloadFile(url) {
				url = "https://mp-45ebcff7-3e0f-48f8-9900-3a6ede487542.cdn.bspapp.com/cloudstorage/03237db5-ce7b-49b9-a441-7e4837761d85.mp3"
				if (url === undefined) {
					uni.showToast({
						icon: 'error',
						title: '下载失败',
						duration: 1500
					})
					return
				}
				this.tips = "文件下载中，请稍后......"
				const downloadTask = uni.downloadFile({
					url: url,
					success: res => {
						let that = this;
						if (res.statusCode === 200) {
							this.tips = "正在保存，请稍后......"
							uni.saveFile({
								tempFilePath: res.tempFilePath,
								success: function(red) {
									that.isShowProgress = false;
									uni.showModal({
										title: '提示',
										content: '文件已保存：' + red.savedFilePath,
										cancelText: '我知道了',
										confirmText: '打开文件',
										success: function(res) {
											if (res.confirm) {
												uni.openDocument({
													filePath: red.savedFilePath,
													success: (sus) => {
														console.log("文件打开成功")
													}
												})
											}
										},
										fail: () => {
											uni.showToast({
												icon: 'error',
												title: '保存失败',
												duration: 1500
											})
										},
										complete: () => {
											uni.setClipboardData({
												data: red.savedFilePath,
												success: function() {
													uni.showToast({
														icon: 'success',
														title: "已复制保存文件路径",
														duration: 1500
													})
												},
												fail: function(err) {}
											});
										}
									});
								}
							});
							
						}
						
					},
					fail: () => {
						uni.showToast({
							icon: 'error',
							title: '下载失败',
							duration: 1500
						})
					}
				})

				downloadTask.onProgressUpdate((res) => {
					if (res.progress > 0) {
						this.isShowProgress = true;
					}
					this.progress = res.progress;
					// console.log('下载进度：' + res.progress);
					// console.log('已下载长度：' + res.totalBytesWritten);
					// console.log('文件总长度：' + res.totalBytesExpectedToWrite);
				})
			}
		}
	}
</script>

<style lang="scss">
	.progress-container {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background: rgba(0, 0, 0, .2);
		width: 750rpx;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;

		.progress-box {
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;

			.text {
				margin-bottom: 20rpx;
			}
		}
	}
</style>